<template>
  <component
    class="PropertyItem"
    v-bind:is="componentName"
    v-bind="{...$props,...$attrs}"
    @keydown.native.stop
  ></component>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import NumberPropertyItem from './NumberPropertyItem.vue'
import StringPropertyItem from './StringPropertyItem.vue'
import TextPropertyItem from './TextPropertyItem.vue'
import AnchorPropertyItem from './AnchorPropertyItem.vue'

@Component({
  components: {
    NumberPropertyItem,
    StringPropertyItem,
    TextPropertyItem,
    AnchorPropertyItem
  }
})
export default class PropertyItem extends Vue {
  @Prop({ type: String })
  private label!: string;

  @Prop({ type: Object, required: true })
  private object!: object;

  @Prop({ type: [String, Number], required: false })
  private prop!: string | number;

  @Prop({ type: String, required: true })
  private type!: string;

  @Prop({ type: Boolean, default: false })
  private disabled!: boolean;

  get componentName () {
    let componentName = this.type + 'PropertyItem'
    componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
    return componentName
  }
}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.PropertyItem {
  display: flex;
  margin-bottom: 5px;
  height: 24px;

  ::v-deep .label {
    display: block;
    flex-grow: 0;
    flex-shrink: 0;
    width: 25%;
    min-width: 50px;
    max-width: 100px;
    font-size: 12px;
    line-height: 24px;
    color: $text-color;
  }

  ::v-deep .input-group {
    display: block;
    flex-grow: 1;
    color: $text-color;
  }
}
</style>
